<template>
  <div class="hotspot">
    <div :class="{active: isLoading}" class="spinner">
      <span :class="{active: isLoading}" class="loading-text">数据正在加载中，请稍等！！！</span>
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>
    <div @click="toArticle(item.id)" class="hotspot-list" v-for="(item,index) in data" :key="index">
      <div class="content">
        <p>{{item.title}}</p>
        <p>{{item.source}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.date | dateFormat }}</p>
        <div>
          <span>{{item.content}}</span>
        </div>
        <p><i class="fa fa-eye" style="margin-left: -9px"></i>
          {{item.readCount}}&nbsp;&nbsp;&nbsp;
          <i class="fa fa-commenting"></i>
          {{isArtId(item.id)}}
        </p>
      </div>
      <div class="img">
        <div class="picture">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="classify">
          <span>{{item.classify}}</span>
        </div>
      </div>
    </div>
    <div class="loading" :class="{active: !isLoading}">
      <p>
        <a href="javascript:(0)">已经到底啦！！！</a>
      </p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import dayjs from 'dayjs';
export default {
  name: "ClassifyArticles",
  data(){
    return{
      data: '',
      isLoading: false,
      commentMessage: [],
      aid: []
    }
  },
  mounted() {
    this.$bus.$on('classifyNewsData',this.getData)
  },
  created() {
    this.getComments();
    this.getHotData();
  },
  methods: {
    getData(data){
      this.data = data;
      //把请求到的分类文章id存储到数组aid中
      for (const d in this.data) {
        //console.log(this.data[d].id)
        this.aid.push(this.data[d].id);
      }
      this.getComments();
    },
    //获取第一次加载页面文章数据
    getHotData(){
      axios.get(`${process.env.VUE_APP_URL}/getOneClassifyData`,{
        params: {
          name: 'HTML'
        }
      })
          .then((res)=>{
              this.isLoading = true;
              this.data = res.data;
              // console.log(this.data);
              for (const d in this.data) {
                //console.log(this.data[d].id)
                this.aid.push(this.data[d].id);
              }
            this.getComments();
          })
          .catch((err)=>{
            console.log(err);
          });
    },
    //  文章详情页
    toArticle(id){
      //把id传递到文章详情页
      this.$router.push({
        path: '/article',
        query: {id: id}
      })
    },
    //根据文章id统计对应的评论信息
    getComments(){
      let arr = [];
        for (const a in this.aid) {
          //console.log(this.aid[a]);
          this.axios.get(`${process.env.VUE_APP_URL}/getComments`,{
            params: {
              aid: this.aid[a]
            }
          }).then((res)=>{
            arr.push(res.data);
          })
        }
      //console.log(arr);
      this.commentMessage = arr;
      //console.log(this.commentMessage);
    },
    isArtId(aid){
      for (let value of this.commentMessage) {
        if (aid == value.aid){
          return value.count;
        }
      }
    }
  },
  filters: {
    //处理日期过滤器
    dateFormat(date){
      return dayjs(date).format('YYYY-MM-DD HH:mm');
    }
  }
}
</script>

<style scoped>
  .loading-text{
    display: block;
    background-color: skyblue;
    font-size: 0.6rem;
  }
  .spinner {
    margin: 100px auto 0;
    width: 90%;
    text-align: center;
  }

  .spinner > div {
    width: 30px;
    height: 30px;
    background-color: #67CF22;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }

  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }

  @-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
  }

  @keyframes bouncedelay {
    0%, 80%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
  }
  .active{
    display: none;
  }
  .hotspot{
  }
  .hotspot-list{
    width: 100%;
    height: 3.5rem;
    margin-top: 6px;
    background:white;
  }
  .hotspot-list div{
    display: inline-block;
    float: left;
  }
  .hotspot-list .content{
    width: 70%;
    height: 3.5rem;
    font-size: 0.6rem;
  }
  .hotspot-list .content p{
    text-indent: 12px;
  }
  .hotspot-list .content p:first-child{
    width: 100%;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.5rem;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hotspot-list .content p:nth-child(2){
    color: #AAAAAA;
    font-size: 0.4rem;
    height: 0.7rem;
    line-height: 0.6rem;
  }
  .hotspot-list .content div{
    width: 93%;
    margin-left: 12px;
    height: 1.4rem;
  }
  .hotspot-list .content div span{
    width: 100%;
    font-size: 0.45rem;
    color: #555555;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  .hotspot-list .content p:last-child{
    color: #AAAAAA;
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.4rem;
  }

  .hotspot-list .img{
    width: 30%;
    height: 3.5rem;
  }
  .hotspot-list .img div{
    font-size: 0.5rem;
    text-align: center;
  }
  .hotspot-list .img .picture{
    width: 100%;
    height: 2.7rem;
    line-height: 2.7rem;
    text-align: center;
  }
  .hotspot-list .img .picture img{
    width: 100%;
    height: 100%;
  }
  .hotspot-list .img .classify{
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
  }
  .hotspot-list .img .classify span{
    display: inline-block;
    width: 70%;
    height: 0.6rem;
    line-height: 0.6rem;
    color: #AAAAAA;
    background:#f1f1f1;
    border-radius: 5px;
  }
  .loading{
    width: 100%;
    height: 2.5rem;
    margin-top: 10px;
    text-align: center;
  }
  .loading p{
    height: 1rem;
    line-height: 1rem;
    font-size: 0.5rem;
  }
  .loading p a{
    display: inline-block;
    height: 0.8rem;
    line-height: 0.8rem;
    text-decoration: none;
  }
</style>